<template>
    <el-dialog v-model="visible" :destroy-on-close="true" :width="450" top="5" :title="dialogData.title">
        <el-select v-model="dialogData.rowData!.permissionIdList" multiple placeholder="请选择权限信息" style="width: 100%;">
            <el-option v-for="item in dialogData.permissionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getAllList } from "/@/api/auth/permission";
import { edit } from "/@/api/auth/menu";

// drawer框状态
const visible = ref(false);
const dialogData = ref({
    title: '',
    permissionList: [],
    permissionIdList: []
});

// 接收父组件传过来的参数
const acceptParams = async (params: any) => {
    dialogData.value = params;
    const { data:permissionList } = await getAllList({});
    dialogData.value!.permissionList = permissionList;
    visible.value = true;
};

// 提交数据（新增/编辑）
const handleSubmit = () => {
    ElMessageBox.confirm('确定提交吗?', '提示', { type: 'warning' }).then(async () => {
        const param = dialogData.value.rowData;
        param.hasPermission = param.permissionIdList.join(',');
        delete param.permissionIdList
        const res = await edit(param);
        if (res) {
            ElMessage.success({ message: '操作成功' });
            dialogData.value.getTableList && dialogData.value.getTableList();
            visible.value = false;
        }
    });
};

defineExpose({
    acceptParams,
});
</script>
